<template>
  <div class="data-container">
    <div class="filter-box">
      <div class="item">
        <div class="label">分类:</div>
        <el-select v-model="cate" placeholder="请选择" @change="handleChange">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
        </el-select>
      </div>
    </div>
    <div id="echarts3"></div>

    <dv-decoration-3 class="decoration" />
  </div>
</template>
<script>
import echarts from 'echarts'
import { getIndexMiddleData } from '@/api/realTime/index'
import { comBaseApi } from '@/api/customer'
import '@/utils/china.js'

export default {
  name: 'panel3',
  data() {
    return {
      myEcharts: '',
      dataList: [],
      options: [],
      cate: '',
    }
  },
  mounted() {
    this.comBaseApi()
    this.getData()
  },
  methods: {
    onInterval() {},
    // 获取分类下拉
    comBaseApi() {
      comBaseApi().then((res) => {
        const { first_class } = res.data
        this.options = first_class.map((item, index) => {
          return {
            value: item,
            label: item,
          }
        })
      })
    },
    // 获取数据
    getData() {
      const info = {
        first_class: this.cate,
      }
      const formData = new FormData()
      for (let key in info) {
        formData.set(key, info[key])
      }
      getIndexMiddleData(formData)
        .then((res) => {
          const { data } = res
          this.dataList = data
          this.initEcharts()
        })
        .catch(() => {
          this.$emit('stopInterval')
        })
    },
    // 筛选项变化
    handleChange(value) {
      this.getData()
    },
    randomData() {
      return Math.round(Math.random() * 500)
    },
    // 初始化图表
    initEcharts() {
      var echartsData1 = this.dataList.map((item) => {
        return {
          name: item.name,
          value: item.value,
        }
      })
      var echartsData2 = this.dataList.map((item) => {
        return {
          name: item.name,
          value: item.value2,
        }
      })
      var max = this.handleMax(echartsData1)

      this.myEcharts = echarts.init(document.getElementById('echarts3'))
      var option = {
        legend: {
          top: '10%',
          textStyle: {
            color: '#ffffff',
          },
        },
        color: ['#68cee0', '#eedd78'],
        tooltip: {
          trigger: 'item',
          // formatter: '{b}<br/>{c} (p 11/ km2)',
        },
        geo: {
          map: 'china',
          zoom: 1.22, // 设置比例比sesies的大，出现外围地图叠加效果
          emphasis: {
            // 高亮状态下的多边形和标签样式
            disabled: true,
          },
          regions: [
            {
              name: '南海诸岛',
              itemStyle: {
                normal: {
                  opacity: 0,
                  label: {
                    show: false,
                    color: '#009cc9',
                  },
                },
              },
            },
          ],
          itemStyle: {
            // 图形样式
            areaColor: 'rgba(0, 0, 0, 0)',
            borderWidth: 2,
            borderColor: '#68cee0',
          },
        },
        visualMap: {
          min: 0,
          max,
          inRange: {
            color: ['rgba(0, 0, 0, 0)', '#274d68'], //控制颜色渐变的范围
          },
          calculable: true, //出现滑块
          bottom: '5%',
          textStyle: {
            color: '#ffffff',
          },
        },
        series: [
          {
            name: '企业数量',
            zoom: 1.2, // 设置比例比sesies的大，出现外围地图叠加效果
            type: 'map',
            mapType: 'china',
            label: {
              show: true,
              color: '#fff',
            },
            itemStyle: {
              // 图形样式
              areaColor: '#274d68',
              borderWidth: 1,
              borderColor: '#68cee0',
              shadowColor: 'rgba(255, 255, 255, 0.5)',
              shadowBlur: 10,
            },
            emphasis: {
              // 高亮状态下的多边形和标签样式
              label: {
                show: false,
                color: '#fff',
              },
              itemStyle: {
                areaColor: 'rgba(255, 255, 255, 0.4)',
                borderWidth: 2,
                borderColor: '#ffffff',
              },
            },
            data: echartsData1,
          },
          {
            name: '外呼条数',
            zoom: 1.2, // 设置比例比sesies的大，出现外围地图叠加效果
            type: 'map',
            mapType: 'china',
            label: {
              show: true,
              color: '#fff',
            },
            itemStyle: {
              // 图形样式
              areaColor: '#274d68',
              borderWidth: 1,
              borderColor: '#68cee0',
              shadowColor: 'rgba(255, 255, 255, 0.5)',
              shadowBlur: 10,
            },
            emphasis: {
              // 高亮状态下的多边形和标签样式
              label: {
                show: false,
                color: '#fff',
              },
              itemStyle: {
                areaColor: 'rgba(255, 255, 255, 0.4)',
                borderWidth: 2,
                borderColor: '#ffffff',
              },
            },
            data: echartsData2,
          },
        ],
      }

      // 使用刚指定的配置项和数据显示图表。
      this.myEcharts.clear() // 清空画布
      setTimeout(() => {
        this.myEcharts.setOption(option)
      }, 100)
      // autoHover(this.myEcharts, echartsData1.length, 3000)
    },
    // 计算地图的最大值
    handleMax(list) {
      let max = 0,
        temp = 0,
        count = 0
      max = temp = list.sort((a, b) => {
        return b.value - a.value
      })[10].value

      do {
        temp = temp / 10
        count++
      } while (temp > 1)
      return parseInt(max / Math.pow(10, count - 1)) * Math.pow(10, count - 1)
    },
    onResize() {
      if (this.myEcharts) {
        this.myEcharts.resize()
      }
    },
  },
}
</script>
<style lang="scss" scoped>
$bgColor: #060a22;
$mainColor: #68cee0;
$mainColorOpcity: rgba(104, 206, 224, 0.3);

.title {
  color: #ffffff;
  font-size: 14px;
  font-weight: bold;
}
.data-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 20px;
  overflow: hidden;
  position: relative;
}
.filter-box {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  color: #ffffff;
  .item {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
    .label {
      margin-right: 10px;
    }
  }
}

#echarts3 {
  width: 100%;
  height: 100%;
}

::v-deep .el-select .el-input__inner {
  background: $mainColorOpcity;
  width: 200px;
  margin-right: 4px;
  color: #ffffff;
  height: 30px;
}
::v-deep .el-input__icon {
  line-height: 30px !important;
}

.decoration {
  position: absolute;
  left: 10px;
  bottom: 10px;
  width: 250px;
  height: 30px;
}
</style>
